<template>
    <div class="Chart-Car-container">
        <chart :options="polar" auto-resize style="width: 100%; text-align: center"></chart>
    </div>
</template>

<script>
    import chart from 'vue-echarts'
    export default {
        name: 'Chart-Car',
        components: {
            chart
        },
        computed: {
        },
        data() {
            let data = []

            for (let i = 0; i <= 360; i++) {
                let t = i / 180 * Math.PI
                let r = Math.sin(2 * t) * Math.cos(2 * t)
                data.push([r, i])
            }

            return {
                polar: {
                    legend: {
                        data: ['line']
                    },
                    polar: {
                        center: ['50%', '55%']
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        }
                    },
                    angleAxis: {
                        type: 'value',
                        startAngle: 0
                    },
                    radiusAxis: {
                        min: 0
                    },
                    series: [
                        {
                            width: 300,
                            coordinateSystem: 'polar',
                            name: 'line',
                            type: 'line',
                            showSymbol: false,
                            data: data
                        }
                    ],
                    animationDuration: 2000
                }
            }
        }
    }
</script>

<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>

</style>